<template>
  <div>
    <!-- 认证信息主体 -->
    <div class="box" v-loading="loading">
      <div class="title">
        <h3>
          <span>平台认证</span>
        </h3>
      </div>
      <div class="f1">
        <ul>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span>经办人认证</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组173.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span style="margin-left: -0.2083rem; color: #999">组织信息核验</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组177.png" alt="" />
              <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
            </div>
            <span style="margin-left: -0.0833rem; color: #999">意愿认证</span>
          </li>
          <li>
            <div class="icon">
              <img class="icon1" src="@/assets/kuajing/组179.png" alt="" />
            </div>
            <span style="margin-left: 0px; color: #999">完成</span>
          </li>
        </ul>
      </div>
      <!-- 提示 -->
      <div class="hint">
        <img src="@/assets/authentication/组26.png" alt="" />
        <div><p>请您务必准确填写认证信息</p></div>
      </div>
      <!-- 认证方式 -->
      <div class="f2">
        <p>认证方式</p>
        <div class="option">
          <div class="option-d1" :class="{ active: row == 1 }" @click="row = 1">人脸识别</div>
          <div
            class="option-d1"
            :class="{ active: row == 2 }"
            @click="row = 2"
            style="margin-left: 0.1563rem"
          >
            银行卡认证
          </div>
          <div
            class="option-d1"
            :class="{ active: row == 3 }"
            @click="row = 3"
            style="margin-left: 0.1563rem"
          >
            手机号认证
          </div>
        </div>
      </div>
      <!-- 人脸识别模块 -->
      <template v-if="row == 1">
        <!-- 人脸识别提示 -->
        <div class="hint-f2">
          <p>人脸识别：</p>
          <p>1、仅支持大陆人士</p>
          <p>2、填写大陆居民身份证姓名、证件号</p>
        </div>
        <!-- 姓名，身份证 -->
        <div class="f3">
          <ul>
            <li>
              <el-form :model="humanFace" :rules="humanFaceRules" label-width="0.9375rem">
                <el-form-item key="name" label="姓名" prop="name">
                  <el-input v-model="humanFace.name"></el-input>
                </el-form-item>
              </el-form>
            </li>
            <li>
              <el-form :model="humanFace" :rules="humanFaceRules" label-width="0.9375rem">
                <el-form-item key="idNumber" label="身份证号" prop="idNumber">
                  <el-input @blur="appFincerNo" v-model="humanFace.idNumber"></el-input>
                </el-form-item>
              </el-form>
            </li>
          </ul>
        </div>
        <div class="license">
          <span class="aaa" style="font-size: 0.0938rem; color: #606266"
            ><span style="color: #f25757">*</span>身份证
          </span>
          <!-- 正面 -->
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-front"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeFront"
            :http-request="uploadFileFront"
            ref="pictureUpload2"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove2(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- 反面 -->
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-reverse"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeReverse"
            :http-request="uploadFileReverse"
            ref="pictureUpload3"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove3(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <div class="license-right card-right">
            <div>
              <p>1.上传文件大小不超过5M；</p>
              <p>2.仅支持bmp、jpeg、png、jpg格式文件。</p>
            </div>
          </div>
        </div>
        <!-- 获取二维码-->
        <div class="f4">
          <button class="getQRCode" @click="getBase64" :disabled="isLock">
            <p>获取二维码</p>
          </button>
          <div class="reminder" v-show="1 > 2">
            <p>认证成功</p>
          </div>
        </div>
        <!-- 下一步 -->
        <!-- <div class="btn">
          <div @click="cancelAddSJHent" class="nextStep">
            <p>取消认证</p>
          </div>
        </div> -->
      </template>
      <!-- 银行卡认证模块 -->
      <template v-if="row == 2">
        <!-- 人脸识别提示 -->
        <div class="hint-f2" style="height: 0.5283rem">
          <p>银行卡认证：</p>
          <p>1、仅支持大陆人士</p>
          <p>2、确保办理该银行所预留的手机号可以接受手机验证码</p>
        </div>
        <!-- 姓名，身份证 -->
        <div class="f3">
          <ul>
            <li>
              <el-form :model="bankCard" :rules="bankCardRules" label-width="0.9375rem">
                <el-form-item key="cardName" label="姓名" prop="cardName">
                  <el-input :disabled="disabledCard" v-model="bankCard.cardName"></el-input>
                </el-form-item>
              </el-form>
            </li>
            <li>
              <el-form :model="bankCard" :rules="bankCardRules" label-width="0.9375rem">
                <el-form-item key="cardIdNumber" label="身份证号" prop="cardIdNumber">
                  <el-input
                    :disabled="disabledCard"
                    @blur="bankCardAppFincerNo"
                    v-model="bankCard.cardIdNumber"
                  ></el-input>
                </el-form-item>
              </el-form>
            </li>
            <!-- 个人银行卡 -->
            <li>
              <el-form :model="bankCard" :rules="bankCardRules" label-width="0.9375rem">
                <el-form-item key="idNumber" label="个人银行卡号" prop="cardBankno">
                  <el-input
                    :disabled="disabledCard"
                    @blur="phoneAppFincerNo"
                    v-model="bankCard.cardBankno"
                  ></el-input>
                </el-form-item>
              </el-form>
            </li>
            <li>
              <!-- disabled -->
              <el-form disabled :model="bankCard" :rules="bankCardRules" label-width="0.9375rem">
                <el-form-item key="idNumber" label="手机号" prop="cardMobile">
                  <el-input @blur="phoneVerify" v-model="bankCard.cardMobile"></el-input>
                </el-form-item>
              </el-form>
            </li>
          </ul>
        </div>
        <!--身份证  -->
        <div class="license">
          <span class="aaa" style="font-size: 0.0938rem; color: #606266"
            ><span style="color: #f25757">*</span>身份证
          </span>
          <!-- 正面 -->

          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-front"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeFront"
            :http-request="uploadFileFront"
            ref="pictureUpload2"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove2(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- 反面 -->
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-reverse"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeReverse"
            :http-request="uploadFileReverse"
            ref="pictureUpload3"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove3(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <div class="license-right card-right">
            <div>
              <p>1.上传文件大小不超过5M；</p>
              <p>2.仅支持bmp、jpeg、png、jpg格式文件。</p>
            </div>
          </div>
        </div>
        <div class="f3">
          <ul>
            <li style="position: relative">
              <el-form :model="bankCard" :rules="bankCardRules" label-width="0.9375rem">
                <el-form-item label="短信验证码" prop="cardAuthcode">
                  <el-input v-model="bankCard.cardAuthcode"></el-input>
                  <p
                    v-if="time == 60"
                    @click="addSJHentbankCardCode"
                    style="
                      font-size: 0.0833rem;
                      color: rgb(63, 110, 242);
                      position: absolute;
                      right: 0.0938rem;
                      top: 0px;
                      cursor: pointer;
                    "
                  >
                    <button
                      :disabled="isLock"
                      style="font-size: 0.0833rem; color: rgb(63, 110, 242); background: #fff"
                    >
                      获取验证码
                    </button>
                  </p>
                  <p
                    v-else
                    style="
                      font-size: 0.0833rem;
                      color: rgb(63, 110, 242);
                      position: absolute;
                      right: 0.0938rem;
                      top: 0px;
                      cursor: pointer;
                    "
                  >
                    {{ time }}秒后重新获取
                  </p>
                </el-form-item>
              </el-form>
            </li>
          </ul>
        </div>
        <!-- 下一步 -->
        <div class="btn">
          <!-- <div @click="cancelAddSJHent" class="nextStep">
            <p>取消认证</p>
          </div> -->
          <button
            @click="addYHKent"
            class="nextStep"
            style="background-color: #3f6ef2"
            :disabled="isLock"
          >
            <p>下一步</p>
          </button>
        </div>
      </template>
      <!-- 手机号验证模块 -->
      <template v-if="row == 3">
        <!-- 人脸识别提示 -->
        <div class="hint-f2">
          <p>手机号认证：</p>
          <p>1、仅支持大陆人士</p>
          <p>2、填写大陆居民身份证姓名、证件号、手机号</p>
        </div>
        <!-- 姓名，身份证 -->
        <div class="f3">
          <ul>
            <li>
              <el-form
                :model="phoneAuthentication"
                :rules="phoneAuthenticationRules"
                label-width="0.9375rem"
              >
                <el-form-item key="phoneName" label="姓名" prop="phoneName">
                  <el-input
                    :disabled="disabledPhone"
                    v-model="phoneAuthentication.phoneName"
                  ></el-input>
                </el-form-item>
              </el-form>
            </li>
            <li>
              <el-form
                :model="phoneAuthentication"
                :rules="phoneAuthenticationRules"
                label-width="0.9375rem"
              >
                <el-form-item key="phoneIdNumber" label="身份证号" prop="phoneIdNumber">
                  <el-input
                    :disabled="disabledPhone"
                    @blur="phoneAppFincerNo"
                    v-model="phoneAuthentication.phoneIdNumber"
                  ></el-input>
                </el-form-item>
              </el-form>
            </li>
            <li>
              <!-- disabled -->
              <el-form
                disabled
                :model="phoneAuthentication"
                :rules="phoneAuthenticationRules"
                label-width="0.9375rem"
              >
                <el-form-item key="phoneMobile" label="手机号" prop="phoneMobile">
                  <el-input
                    :disabled="disabledPhone"
                    v-model="phoneAuthentication.phoneMobile"
                  ></el-input>
                </el-form-item>
              </el-form>
            </li>
          </ul>
        </div>
        <!--身份证  -->
        <div class="license">
          <span class="aaa" style="font-size: 0.0938rem; color: #606266"
            ><span style="color: #f25757">*</span>身份证
          </span>
          <!-- 正面 -->

          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-front"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeFront"
            :http-request="uploadFileFront"
            ref="pictureUpload2"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove2(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- 反面 -->
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-reverse"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeReverse"
            :http-request="uploadFileReverse"
            ref="pictureUpload3"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove3(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <div class="license-right card-right">
            <div>
              <p>1.上传文件大小不超过5M；</p>
              <p>2.仅支持bmp、jpeg、png、jpg格式文件。</p>
            </div>
          </div>
        </div>
        <div class="f3">
          <ul>
            <li style="position: relative">
              <el-form
                :model="phoneAuthentication"
                :rules="phoneAuthenticationRules"
                label-width="0.9375rem"
              >
                <el-form-item key="authcode" label="短信验证码" prop="authcode">
                  <el-input v-model="phoneAuthentication.authcode"></el-input>
                  <p
                    v-if="timePhone == 60"
                    style="
                      font-size: 0.0833rem;
                      color: rgb(63, 110, 242);
                      position: absolute;
                      right: 0.0938rem;
                      top: 0px;
                      cursor: pointer;
                    "
                  >
                    <button
                      @click="addSJHentPhoneCode"
                      :disabled="isLock"
                      style="font-size: 0.0833rem; color: rgb(63, 110, 242); background: #fff"
                    >
                      获取验证码
                    </button>
                  </p>
                  <p
                    v-else
                    style="
                      font-size: 0.0833rem;
                      color: rgb(63, 110, 242);
                      position: absolute;
                      right: 0.0938rem;
                      top: 0px;
                      cursor: pointer;
                    "
                  >
                    {{ timePhone }}秒后重新获取
                  </p>
                </el-form-item>
              </el-form>
            </li>
          </ul>
        </div>
        <!-- 下一步 -->
        <div class="btn">
          <!-- <div @click="cancelAddSJHent" class="nextStep">
            <p>取消认证</p>
          </div> -->
          <button
            @click="addSJHent"
            class="nextStep"
            style="background-color: #3f6ef2"
            :disabled="isLock"
          >
            <p>下一步</p>
          </button>
        </div>
      </template>
    </div>
    <!-- 人脸识别 -->
    <el-dialog
      :closeOnClickModal="false"
      title="人脸识别"
      :visible.sync="inviteDialogVisible"
      :before-close="closeVisible"
      width="25%"
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <div class="position" v-if="showHint == 1">
          <img src="../../assets/authentication/组42.png" alt="" />
          <p>认证成功</p>
        </div>
        <div class="position" v-if="showHint == 2">
          <img src="../../assets/authentication/组44.png" alt="" />
          <p style="color: #f77272">认证失败</p>
        </div>
        <p>请扫描二维码，并依据提示完成人脸识别</p>
        <img :src="'data:image/Jpeg;base64,' + image" alt="" />
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt" @click="getBase64" :disabled="isLock">刷新二维码</button>
      </div>
    </el-dialog>
    <!-- 弹框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { base, addRZentFind, addYHKent, addSJHent, entHX } from '@/utils'
export default {
  data() {
    return {
      customerid: '',
      loading: false,
      times: 0,
      disabledCard: false, //银行卡
      disabledPhone: false, //手机号
      showHint: null,
      base: '',
      token: '',
      fileListFront: [], //身份证正面
      fileListReverse: [], //身份证反面
      dialogImageUrl: '', //查看缩略图
      dialogVisible: false,
      disabled: false,
      intervalID: null,
      row: 1,
      time: 60,
      timePhone: 60,
      inviteDialogVisible: false,
      image: '',
      isLock: false, // 控制按钮的disable属性
      succ: '', // 判断是新增还是修改
      // 人脸认证
      humanFace: {
        idNumber: '', //身份证
        idType: 'CRED_PSN_CH_IDCARD',
        mobile: '',
        name: ''
      },
      // 银行卡认证
      bankCard: {
        cardName: '',
        cardIdNumber: '',
        cardBankno: '',
        cardMobile: '',
        cardAuthcode: '',
        flowId: '',
        idType: 'CRED_PSN_CH_IDCARD',
        objecttype: 'RZfile'
      },

      // 手机号认证
      phoneAuthentication: {
        phoneName: '',
        phoneMobile: '',
        phoneIdNumber: '',
        authcode: '',
        flowId: '',
        idType: 'CRED_PSN_CH_IDCARD',
        objecttype: 'RZfile',
        accountid: '',
        customerid: ''
      },
      humanFaceRules: {
        name: [{ required: true, message: ' ', trigger: 'blur' }],
        idNumber: [{ required: true, message: '格式错误，请重新输入', trigger: 'blur' }]
      },
      phoneAuthenticationRules: {
        phoneName: [{ required: true, message: ' ', trigger: 'blur' }],
        phoneMobile: [{ required: true, message: ' ', trigger: 'blur' }],
        phoneIdNumber: [{ required: true, message: '格式错误，请重新输入', trigger: 'blur' }],
        authcode: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      bankCardRules: {
        cardName: [{ required: true, message: ' ', trigger: 'blur' }],
        cardIdNumber: [{ required: true, message: '格式错误，请重新输入', trigger: 'blur' }],
        cardMobile: [{ required: true, message: ' ', trigger: 'blur' }],
        cardAuthcode: [{ required: true, message: ' ', trigger: 'blur' }],
        cardBankno: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.humanFace.mobile = JSON.parse(sessionStorage.getItem('userPhone'))
    this.phoneAuthentication.phoneMobile = JSON.parse(sessionStorage.getItem('userPhone'))
    this.bankCard.cardMobile = JSON.parse(sessionStorage.getItem('userPhone'))
    this.succ = sessionStorage.getItem('rzstatus')
    this.base = base
    this.entHX()
  },
  // 方法
  methods: {
    // 信息回显
    async entHX() {
      let customerid = sessionStorage.getItem('customerid')
      if (!customerid) return
      let { data } = await entHX(customerid)
      if (!data.ent) return
      // 人脸识别
      this.humanFace.name = data.ent.operatename
      this.humanFace.idNumber = data.ent.operatecertid
      // 银行卡认证
      this.bankCard.cardName = data.ent.operatename
      this.bankCard.cardIdNumber = data.ent.operatecertid
      this.bankCard.cardBankno = data.ent.operatebankno
      // 手机号认证
      this.phoneAuthentication.phoneName = data.ent.operatename
      this.phoneAuthentication.phoneIdNumber = data.ent.operatecertid
    },
    // 取消认证
    cancelAddSJHent() {
      this.$router.push('/platform')
    },
    // // 关闭弹窗
    closeVisible() {
      clearInterval(this.intervalID)
      this.inviteDialogVisible = false
    },
    // // 人脸认证结果
    async addRZentFind() {
      let time = this.times++
      if (time == 60) {
        this.$Message.error('认证失败，请刷新二维码')
        this.showHint = 2
        clearInterval(this.intervalID)
        return
      }
      let data = await addRZentFind()
      if (data.data == false) {
        this.showHint = 2
        clearInterval(this.intervalID)
      } else if (data.data == true) {
        this.showHint = 1
        clearInterval(this.intervalID)
        setTimeout(() => {
          this.$router.push('/authentication1')
        }, 2000)
      }
    },
    // //  获取人脸认证二维码
    async getBase64() {
      let customerid = this.succ ? sessionStorage.getItem('customerid') : ''
      this.loading = true
      clearInterval(this.intervalID)
      this.showHint = null
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let { idNumber, name, idType, mobile } = this.humanFace
      // let customerid = sessionStorage.getItem("customerid");
      if (
        name.trim() == '' ||
        idNumber.trim() == '' ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0
      ) {
        this.loading = false
        this.$Message.error('请填写信息')
        return
      }
      // 校验图片格式
      if (
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListFront.name) ||
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListReverse.name)
      ) {
        this.loading = false
        this.$Message.warning('暂不支持上传该格式文件')
        return
      }
      // 调用接口
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      formData.append('file', this.fileListReverse)
      let token = sessionStorage.getItem('token')
      let url =
        this.base +
        `/api/ents/addRLRZent?idNumber=${idNumber}&name=${name}&idType=${idType}&mobile=${mobile}&objecttype=RZfile&coopid=${customerid}`
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            this.image = res.data.data.base64
            let token = res.data.data.toekn
            this.inviteDialogVisible = true
            sessionStorage.setItem('token', token)
            this.intervalID = setInterval(this.addRZentFind, 1000)
            this.loading = false
            this.times = 0
            return
          }
          this.loading = false
          this.$Message.error('经办人信息错误，请重新输入')
        })
        .catch(error => {
          this.loading = false
          this.$Message.error('经办人认证未通过')
        })
    },
    // 手机号认证
    // 获取验证码
    async addSJHentPhoneCode() {
      this.loading = true
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      if (this.timePhone != 60) {
        return
      }
      this.phoneAuthentication.customerid =
        this.succ == 'undefined' || this.succ == 'null' ? '' : sessionStorage.getItem('customerid')
      let data = await addSJHent(this.phoneAuthentication)
      if (data.code == 100) {
        this.loading = false
        this.disabledPhone = true
        this.$Message.success('短信发送成功')
        this.phoneAuthentication.flowId = data.data.json2.flowId
        this.phoneAuthentication.accountid = data.data.json2.accountid
        this.phoneAuthentication.customerid = data.data.ent.customerid

        let times = setInterval(() => {
          this.timePhone--
          this.timePhone = this.timePhone
          if (this.timePhone == -1) {
            clearInterval(times)
            this.timePhone = 60
          }
        }, 1000)
        return
      }
      this.loading = false
      this.$Message.error('经办人信息错误，请重新输入')
    },
    // // 手机号认证
    async addSJHent() {
      this.loading = true
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let {
        accountid,
        phoneName,
        phoneIdNumber,
        authcode,
        phoneMobile,
        flowId,
        idType,
        objecttype,
        customerid
      } = this.phoneAuthentication

      if (
        phoneName.trim() == '' ||
        phoneIdNumber.trim() == '' ||
        authcode.trim() == '' ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0
      ) {
        this.loading = false
        this.$Message.error('请填写信息')
        return
      }
      // 校验图片格式
      if (
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListFront.name) ||
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListReverse.name)
      ) {
        this.loading = false
        this.$Message.warning('暂不支持上传该格式文件')
        return
      }
      // 调用接口
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      formData.append('file', this.fileListReverse)
      let token = sessionStorage.getItem('token')
      let url =
        this.base +
        `/api/ents/addSJHent?name=${phoneName}&idNumber=${phoneIdNumber}&mobile=${phoneMobile}&idType=${idType}&authcode=${authcode}&flowId=${flowId}&objecttype=${objecttype}&accountid=${accountid}&coopid=${customerid}`
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            this.loading = false
            let token = res.data.data.toekn
            sessionStorage.setItem('token', token)
            this.$router.push('/authentication1')
            return
          } else if (res.data.code == 31002) {
            this.loading = false
            this.$Message.error('验证码错误，请重新输入')
            this.phoneAuthentication.authcode = ''
            return
          }
          this.$Message.error('经办人认证未通过')
          this.loading = false
        })
        .catch(error => {
          this.loading = false
          this.$Message.error('经办人认证未通过')
        })
    },
    // 银行卡认证
    // 获取验证码
    async addSJHentbankCardCode() {
      this.loading = true
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let { cardName, cardIdNumber, cardBankno, cardMobile, idType } = this.bankCard
      let customerid = this.succ ? sessionStorage.getItem('customerid') : ''
      cardMobile = cardMobile.toString()
      if (
        cardMobile.trim() == '' ||
        cardName.trim() == '' ||
        cardIdNumber.trim() == '' ||
        cardBankno == ''
      ) {
        this.loading = false
        this.$Message.error('请填写信息')
        return
      }
      let bankCard = {
        cardName: cardName,
        cardIdNumber: cardIdNumber,
        cardBankno: cardBankno,
        cardMobile: cardMobile,
        idType: idType,
        customerid: customerid
      }
      let data = await addYHKent(bankCard)
      if (data.code == 100) {
        this.loading = false
        let token = data.data.toekn
        this.customerid = data.data.ent.customerid
        sessionStorage.setItem('token', token)
        this.$Message.success('短信发送成功')
        this.disabledCard = true
        this.bankCard.flowId = data.data.TblRZFlow.flowId
        let times = setInterval(() => {
          this.time--
          this.time = this.time
          if (this.time == -1) {
            clearInterval(times)
            this.time = 60
          }
        }, 1000)
        return
      }
      this.loading = false
      this.$Message.error('经办人信息错误，请重新输入')
    },
    // 银行卡认证
    async addYHKent() {
      this.loading = true
      let {
        cardName,
        cardIdNumber,
        cardBankno,
        cardMobile,
        cardAuthcode,
        idType,
        flowId,
        objecttype
      } = this.bankCard
      // let customerid = this.succ ? sessionStorage.getItem("customerid") : "";
      let customerid = this.customerid
      cardMobile = cardMobile.toString()
      if (
        cardMobile.trim() == '' ||
        cardName.trim() == '' ||
        cardIdNumber.trim() == '' ||
        cardBankno.trim() == '' ||
        cardAuthcode.trim() == '' ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0
      ) {
        this.loading = false
        this.$Message.error('请填写信息')
        return
      }
      // 校验图片格式
      if (
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListFront.name) ||
        !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListReverse.name)
      ) {
        this.loading = false
        this.$Message.warning('暂不支持上传该格式文件')
        return
      }
      // 调用接口
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      formData.append('file', this.fileListReverse)
      let token = sessionStorage.getItem('token')
      let url =
        this.base +
        `/api/ents/addYHKent?name=${cardName}&idNumber=${cardIdNumber}&bankno=${cardBankno}&mobile=${cardMobile}&idType=${idType}&authcode=${cardAuthcode}&flowId=${flowId}&objecttype=${objecttype}&coopid=${customerid}`
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            this.loading = false
            return this.$router.push('/authentication1')
          } else if (res.data.code == 31002) {
            this.loading = false
            return this.$Message.warning('验证码错误，请重新输入')
          }
          this.loading = false
          this.$Message.error('经办人认证未通过')
        })
        .catch(error => {
          this.loading = false
          this.$Message.error('经办人认证未通过')
        })
    },
    // 文件上传
    // 删除缩略图
    handleRemove2(file) {
      this.$refs.pictureUpload2.handleRemove(file)
      this.fileListFront = []
    },
    handleRemove3(file) {
      this.$refs.pictureUpload3.handleRemove(file)
      this.fileListReverse = []
    },
    // 查看缩略图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 正面-----------------------------------------------------
    handleChangeFront(file, fileList) {
      this.fileListFront = fileList[0].raw
    },
    //自定义上传文件
    uploadFileFront(file) {
      // this.formData.append("file", file.file);
      return
    },

    // 反面——————————————————————————————————————————————————————————
    handleChangeReverse(file, fileList) {
      this.fileListReverse = fileList[0].raw
    },
    //自定义上传文件
    uploadFileReverse(file) {
      // this.formData.append("file1", file.file);
      return
    },

    // 身份证号码校验
    // 人脸识别身份证号
    appFincerNo() {
      let fincertNO = this.humanFace.idNumber
      let IDRe18 =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
      if (IDRe18.test(fincertNO) || IDre15.test(fincertNO)) {
        //判断第18位校验值
        if (fincertNO.length == 18) {
          let charArray = Array.from(fincertNO)
          //前十七位加权因子
          let idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          //这是除以11后，可能产生的11位余数对应的验证码
          let idCardY = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
          let sum = 0
          for (let i = 0; i < idCardWi.length; i++) {
            let current = charArray[i]
            let count = current * idCardWi[i]
            sum += count
          }
          let idCardLast = charArray[17]
          let idCardMod = sum % 11
          if (idCardY[idCardMod].toUpperCase() == idCardLast.toUpperCase()) {
            return true
          } else {
            this.humanFace.idNumber = ''
          }
        }
      } else {
        this.humanFace.idNumber = ''
      }
    },
    // 手机号认证身份证校验
    phoneAppFincerNo() {
      let fincertNO = this.phoneAuthentication.phoneIdNumber
      let IDRe18 =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
      if (IDRe18.test(fincertNO) || IDre15.test(fincertNO)) {
        //判断第18位校验值
        if (fincertNO.length == 18) {
          let charArray = Array.from(fincertNO)
          //前十七位加权因子
          let idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          //这是除以11后，可能产生的11位余数对应的验证码
          let idCardY = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
          let sum = 0
          for (let i = 0; i < idCardWi.length; i++) {
            let current = charArray[i]
            let count = current * idCardWi[i]
            sum += count
          }
          let idCardLast = charArray[17]
          let idCardMod = sum % 11
          if (idCardY[idCardMod].toUpperCase() == idCardLast.toUpperCase()) {
            return true
          } else {
            this.phoneAuthentication.phoneIdNumber = ''
          }
        }
      } else {
        this.phoneAuthentication.phoneIdNumber = ''
      }
    },
    // 银行卡认证身份证校验
    bankCardAppFincerNo() {
      let fincertNO = this.bankCard.cardIdNumber
      let IDRe18 =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      let IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
      if (IDRe18.test(fincertNO) || IDre15.test(fincertNO)) {
        //判断第18位校验值
        if (fincertNO.length == 18) {
          let charArray = Array.from(fincertNO)
          //前十七位加权因子
          let idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          //这是除以11后，可能产生的11位余数对应的验证码
          let idCardY = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
          let sum = 0
          for (let i = 0; i < idCardWi.length; i++) {
            let current = charArray[i]
            let count = current * idCardWi[i]
            sum += count
          }
          let idCardLast = charArray[17]
          let idCardMod = sum % 11
          if (idCardY[idCardMod].toUpperCase() == idCardLast.toUpperCase()) {
            return true
          } else {
            this.bankCard.cardIdNumber = ''
          }
        }
      } else {
        this.bankCard.cardIdNumber = ''
      }
    },
    // 手机号校验
    // 银行卡认证手机号校验
    phoneVerify() {
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(this.bankCard.cardMobile)) {
        this.bankCard.cardMobile = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 面包屑
.breadcrumb {
  display: flex;
  align-items: center;
  height: 0.3958rem;
  font-size: 0.0833rem;
  background-color: rgb(242, 244, 247);
  .icon {
    margin: 0 0.0521rem 0 0.0208rem;
  }
  .span {
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #999999;
  }
  img {
    width: 0.0938rem;
    height: 0.0938rem;
    margin-right: 0.026rem;
  }
}
// 主体
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #ffffff;

  border-radius: 0.0313rem;
  padding: 0.1042rem 0.3073rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  padding: 0.2604rem;
  // 标题
  .title {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.1302rem;
    h3 {
      font-size: 0.1146rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #222222;
    }
  }
  .f1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.1875rem;
          }
          .icon2 {
            width: 0.9375rem;
            height: 0.0104rem;
            margin: 0 0.1042rem;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #627dca;
          margin-left: -0.1563rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .hint {
    height: 0.1354rem;
    display: flex;
    align-items: center;
    margin-top: 0.2344rem;
    img {
      width: 0.099rem;
      height: 0.099rem;
      margin-right: 0.026rem;
      margin-left: 0.2083rem;
    }
    div {
      box-sizing: border-box;
      padding-left: 0.0521rem;
      display: flex;
      align-items: center;
      width: 2.5521rem;
      height: 0.1354rem;
      font-size: 0.0833rem;
      color: #b3b3b3;
      background-color: #f5f5f5;
    }
  }
  .f2 {
    display: flex;
    // width: 580px;
    height: 0.1354rem;
    // margin-left: 26px;
    margin-top: 0.1302rem;
    margin-left: 0.5104rem;
    p {
      font-size: 0.09383rem;
      color: #787c80;
    }
    .option {
      display: flex;
      // justify-content: space-between;
      margin-left: 0.0465rem;
      width: 3.125rem;
      height: 0.1354rem;
      // background-color: #f00;
      .option-d1 {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 0.0052rem solid #b3b3b3;
        background-color: #fff;
        color: #808080;
        width: 0.8802rem;
        height: 0.1563rem;
        font-size: 0.0938rem;
        &.active {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.8802rem;
          height: 0.1563rem;
          background: #3f6ef2;
          border: 0.0052rem solid #3f6ef2;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #fff;
        }
      }
    }
  }
  .hint-f2 {
    box-sizing: border-box;
    width: 2.5521rem;
    height: 0.4948rem;
    background: #f5f5f5;
    margin-top: 0.1146rem;
    margin-left: 0.3385rem;
    padding: 0.0781rem 0.1302rem;
    p {
      font-size: 0.0729rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #b3b3b3;
      line-height: 0.1146rem;
    }
  }

  .f3 {
    display: flex;
    width: 4.0729rem;
    margin-top: 0.1042rem;
    // margin-top: 5%;
    ul {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      li {
        display: flex;
        margin-bottom: 0.1042rem;
        height: 0.2604rem;
      }
    }
  }
  // 身份证正反面
  .license {
    display: flex;
    justify-content: center;
    @media only screen and (min-width: 1px) and (max-width: 1450px) {
      margin-top: 0.1042rem;
    }
    @media only screen and (min-width: 1451px) and (max-width: 2580px) {
      margin-left: 1.5rem;
    }
    @media only screen and (min-width: 1px) and (max-width: 1450px) {
      margin-left: 1.65rem;
    }
    .aaa {
      @media only screen and (min-width: 1px) and (max-width: 1450px) {
        width: 0.4948rem;
      }
      @media only screen and (min-width: 1451px) and (max-width: 2580px) {
        width: 0.4rem;
      }
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    .permit {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      width: 1.25rem;
      height: 0.7813rem;
      background: url(@/assets/authentication/组66.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 0.0781rem;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 1.3021rem;
        height: 100%;
      }
    }

    .permit-reverse {
      background: url(@/assets/authentication/组67.png) no-repeat;
      background-size: 100% 100%;
    }
    .card {
      width: 1.125rem;
      height: 0.6406rem;
      margin-right: 0.0417rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .license-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      div {
        width: 100%;
        p {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          line-height: 0.125rem;
        }
      }
    }
  }
  //获取二维码
  .f4 {
    display: flex;
    align-items: center;
    width: 2.6042rem;
    height: 0.1354rem;
    margin-left: 0.4948rem;
    margin-top: 0.1563rem;
    .getQRCode {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.875rem;
      height: 0.1354rem;
      // line-height: 26px;
      background: #3f6ef2;
      border: 0px;
      p {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .reminder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.3646rem;
      height: 0.1042rem;
      background: #ecfafe;
      margin-left: 0.1042rem;
      p {
        font-size: 0.0729rem;
        color: #3f6ef2;
      }
    }
  }
  // 下一步
  .btn {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 0.1823rem;
    margin-top: 0.2083rem;
    // background-color: #f00;
    .nextStep {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.0469rem;
      height: 0.1823rem;
      background-color: #ccc;
      margin-right: 0.1563rem;
      // border: 1px solid #3f6ef2;
      border-radius: 0.0208rem;
      p {
        font-size: 0.0938rem;
        // color: #3f6ef2;
        color: #fff;
      }
    }
  }
}
// 弹出框
.dialog-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  p {
    font-size: 0.0729rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #666;
  }
  .position {
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 65%;
    height: 95%;
    top: 0.1042rem;
    background-color: rgba(196, 196, 196, 0.9);
    p {
      font-size: 0.0833rem;
      color: #3f6ef2;
      margin-top: 0.1042rem;
    }
  }
}
// 弹框按钮
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;

  .dialog-footer-bnt {
    width: 0.875rem;
    height: 0.1563rem;
    background: #3f6ef2;
    border-radius: 0.0208rem;
    color: #fff;
    border: 0;
    font-size: 0.0938rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 2.5521rem;
  height: 0.2083rem;
  font-size: 0.0833rem;
  border: 0.0052rem solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
}
::v-deep .el-form-item__label {
  font-size: 0.0938rem;
  padding: 0 0.0625rem 0 0;
}
::v-deep .el-form-item__error {
  font-size: 0.0625rem;
  line-height: 1;
  @media only screen and (min-width: 0px) and (max-width: 1299px) {
    margin-top: -12px;
  }
  @media only screen and (min-width: 1300px) and (max-width: 1449px) {
    margin-top: -8px;
  }
  @media only screen and (min-width: 1450px) and (max-width: 1600px) {
    margin-top: -5px;
  }
}
</style>
<style lang="scss">
// 上传
.el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 160px;
  display: flex;
  margin: 0;
  z-index: 888;
}
.el-dialog__header {
  border: 0px;
}

.el-form-item {
  margin-bottom: 0;
}
</style>
